
<template>
  <div class="container">
    <!-- 题库管理无非是对题库的增删改查，我们就以当前有一个选择题为例，去进行一个分析
    1. 增
        创建
        导入
    2. 删
        删除
    3. 改
        修改
    4. 查
        查看与查找
        按照知识点或者说什么反正来进行分类查找，展示形式以不知道什么形式展示
     -->
    <!-- <h1>This is 题库管理</h1> -->
    <div class="addTest">
      <el-button type="primary" @click="createTopic">新建</el-button>
      <el-button type="primary" @click="importTopic">导入</el-button>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <create-exercise v-if="dialogType == 0"></create-exercise>
      <import-topic v-else></import-topic>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 用一个卡片来展示题干与所属类型 -->
    <div class="topics">
      <topic-manager-block
        v-for="(topic, idx) in topics"
        :key="idx"
        :topic="topic"
        :switchDialog="switchDialog"
        :dropTopicById="dropTopicById"
      ></topic-manager-block>
    </div>
  </div>
</template>

<script>
import TopicManagerBlock from "@/components/TopicManagerBlock.vue";
import CreateExercise from "@/page/Teacher/CreateExercise";
import { mapMutations } from "vuex";
import ImportTopic from "@/components/ImportTopic.vue";
export default {
  data() {
    return {
      topics: [
        {
          title: "1+1=?",
          tid: "10086",
          category: ["单选", "计算", "易"],
          type: "sc",
          correct: 0,
          opts: ["1", "2", "3", "4"],
          explain: "1+1=2",
        },
        {
          title: "1+2=?",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
        {
          title: "1+3=?",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
        {
          title: "e^x的导函数是什么",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
        {
          title: "海上生明月,_____",
          tid: "10086",
          category: ["填空", "单选", "计算", "易"],
        },
        {
          title: "表达了作者怎样的思想感情",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
        {
          title: "表达了作者怎样的思想感情",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
        {
          title: "表达了作者怎样的思想感情",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
        {
          title: "表达了作者怎样的思想感情",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
        {
          title: "表达了作者怎样的思想感情",
          tid: "10086",
          category: ["单选", "计算", "易"],
        },
      ],
      dialogVisible: false,
      dialogType: "",
    };
  },
  components: { TopicManagerBlock, CreateExercise, ImportTopic },
  methods: {
    // ...mapMutations("windowAbout", ["OPEN"]),
    // 创建题目的方法
    createTopic() {
      // this.$router.push("/create_exercise");
      // this.OPEN();
      this.dialogVisible = true;
      this.dialogType = 0;
    },
    // 修改题目的方法
    alterTopic() {
      //
      console.log("一个带参跳转就ok");
    },
    // 删除题目的方法

    dropTopicById(tid) {
      this.topics = this.topics.filter((t) => t.tid !== tid);
    },
    // 导入题目的方法
    importTopic() {
      this.dialogVisible = true;
      this.dialogType = 1;
    },
    switchDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
  },
  created() {
    // 这里去请求topic用上懒加载
    this.$http.post(`${this.$reqPrefix}/getExcercise`).then((res) => {
      console.log(res);
    });
  },
};
</script>

<style lang='less' scoped>
.container {
  .addTest {
    text-align: left;
    margin-bottom: 20px;
  }
  .topics {
    overflow: auto;
    height: 540px;
  }
}
</style>